<template>
  <div class="app_content_container">
    <Breadcrumb :items="['操作系统']" />
    <BaseTable
      ref="baseTableRef"
      :apiUrl="getOperatingSystemList"
      :columns="columns"
      placeholder="请输入名称"
      height="calc(100vh - 180px)"
      @handleEditOrAdd="$refs.addOrEditRef.open()"
    >
      <template #enabled="{ record }">
        <ga-switch
          :checked-value="1"
          :unchecked-value="0"
          size="mini"
          v-model="record.enabled"
          @change="handleEnabledChange(record)"
        />
      </template>
      <template #action="{ record }">
        <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
        <ga-link status="danger" @click="handleDelete(record)">删除</ga-link>
      </template>
    </BaseTable>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { columns } from "./columns";
import {
  getOperatingSystemList,
  deleteOperatingSystem,
  editEnabled,
} from "@/api/operatingSystem";
import { deleteModalWithRefresh } from "@/hooks/useWarningModal";
import addOrEdit from "./addOrEdit.vue";
import { Message } from "@garco-design/web-vue";

// 删除方法
const baseTableRef = ref(null);
const handleDelete = ({ id, osName }) => {
  deleteModalWithRefresh({ name: osName, id }, deleteOperatingSystem, () =>
    baseTableRef.value.fetchData()
  );
};
// 处理方法
const handleEnabledChange = async (record) => {
  try {
    const { code } = await editEnabled(record?.id, { enabled: record?.enabled });
    if (code === 20000) Message.success("操作成功");
  } catch (error) {
    baseTableRef.value.fetchData();
  }
};
</script>

<style lang="scss" scoped></style>
